<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<%String basePath = request.getContextPath(); %>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>步步生活</title>
<script type="text/javascript" src="<%=basePath %>/resource/js/jquery/jquery-1.8.2.js"></script>
<%-- <script type="text/javascript" src="<%=basePath %>/resource/js/bootstrap-carousel.js"></script> --%>
<script type="text/javascript" src="<%=request.getContextPath() %>/resource/js/jquery/jquery.cookie.js"></script>
<script type="text/javascript" src="<%=basePath %>/resource/js/index.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/resource/js/honeycombtool.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/resource/js/msgConstants.js"></script>
<style type="text/css">
	div{
		border: 0px solid red;
		margin: 0 auto;
	}
	
	#bottom  
	{  
	  width:200px;  
	  height:300px;  
	  border:2px solid #ffffff; /* 边框宽度为3px */  
	  position:relative;  
	}  
	.sp1,.sp2  
	{
	  position:absolute; 
	  left:-2px; 
	  overflow:hidden; 
	  width:0; 
	  height:0; 
	  border-width:102px; 
	  border-style:solid dashed dashed dashed;
	}
	.position-pointer {
		position:absolute;
		left:-2px;
		top: 302px; 
	    overflow:hidden;
		background: transparent; height: 0; width: 0; border-left: 102px solid transparent; border-right: 102px solid transparent; border-top: 60px solid #FFFFFF;
	}  
	.sp1  
	{
	  bottom:-206px; 
	  border-color:#ffffff transparent transparent transparent; 
	}  
	.sp2  
	{  
	 bottom:-19px; 
	 border-color:#ffffff transparent transparent transparent;  
	}
	
    *
    {
        margin: 0;
        padding: 0;
        font-size: 12px;
    }
    div.outDiv
    {
        margin: 30px auto;
        height: auto;
    }
    div.play
    {
        cursor: pointer;
        text-decoration: underline;
    }
    .CRslide
    {
        position: relative;
        display: block;
        float: left;
        height: 300px;
        width: 400px;
        overflow: hidden;
    }
         .CRslide img
        {
            width: 300px;
            height: 300px;
            display: block;
            position: absolute;
            top: 0px;
            opacity: 0;
        }
        .CRslide img.current
        {
            opacity: 1;
        }
        .num li
        {
            float: left;
            color: #FF7300;
            text-align: center;
            line-height: 16px;
            width: 18px;
            height: 18px;
            font-family: Arial;
            font-size: 12px;
            cursor: pointer;
            overflow: hidden;
            margin: 3px 1px;
            border: 1px solid #FF7300;
            background-color: #fff;
        }
        .num li.on
        {
            color: #fff;
            background-color: #FF7300;
        }
        .playBox
        {
            float: left;
            position: relative;
            clear: both;
        }
        .playBox div
        {
            cursor: pointer;
            text-align: center;
            float: left;
            margin-right: 10px;
        }
        body{
		font-family:"方正稚艺_GBK";
		text-align:center;
		font-weight: bold; 
		}
</style>
<script type="text/javascript">
$(function() {
	// 获取小区列表
	loadPosition();
    var i = 0;
    var $imgs = $(".CRslide img");
    var len = $imgs.length;
    var imgWidth = $imgs.eq(0).width();

    var CRtime;

    $(".next").click(function() {
        if (CRtime) { autoStop(); autoPlay(); }
        if (!$imgs.is(":animated")) {//如果不处于动画状态
            if (i < (len - 1)) {
                $imgs.eq(i).animate({ opacity: 0 }, 1000);
                $imgs.eq(i + 1).animate({ opacity: 1 }, 1000);
                i++;
            } else {
                $imgs.eq(len - 1).animate({ opacity: 0 }, 1000);
                $imgs.eq(0).animate({ opacity: 1 }, 1000);
                i = 0;
            }
            $(".num li").eq(i).addClass("on").siblings().removeClass("on");
        }
    });

    $(".pre").click(function() {
        if (CRtime) { autoStop(); autoPlay(); }
        if (!$imgs.is(":animated")) {//如果不处于动画状态
            if (i > 0) {
                $imgs.eq(i).animate({ opacity: 0 }, 1000);
                $imgs.eq(i - 1).animate({ opacity: 1 }, 1000);
                i--;
            } else {
                $imgs.eq(0).animate({ opacity: 0 }, 1000);
                $imgs.eq(len - 1).animate({ opacity: 1 }, 1000);
                i = len - 1;
            }
            $(".num li").eq(i).addClass("on").siblings().removeClass("on");
        }
    });

    var autoPlay = function() {
        if (CRtime) { autoStop(); }
        CRtime = window.setInterval(function() {
            $(".next").click();
        }, 3000);
    };
    var autoStop = function() {
        window.clearInterval(CRtime);
    };

    $(".play").click(autoPlay).click();
    $(".stop").click(autoStop);

    $(".num li").each(function(index) {
        $(this).click(function() {
            if (CRtime) { autoStop(); autoPlay(); }
            if (!$imgs.is(":animated")) {//如果不处于动画状态
                if (i != index && index < len) {
                    $imgs.eq(i).animate({ opacity: 0 }, 1000);
                    $imgs.eq(index).animate({ opacity: 1 }, 1000);
                    i = index;
                }
                $(".num li").eq(index).addClass("on").siblings().removeClass("on");
            }
        });
    });

    $("img").attr("title", function() { return this.src.substring(this.src.lastIndexOf("/") + 1); });
});

function loadPosition(){
	$.ajax({
			url: '<%=basePath%>/position/getPositions',
			type: 'post',
			async: true,
			dataType: 'json',
			success: function(res) {
				showPosition(res.positions);
			}
		});
};
function showPosition(positions) {
	var positionStr = '';
	$.each(positions, function(i, position) {
		positionStr += '<div>'+position.positionName+'</div>';
	});
	$("#positions").html(positionStr);
}
</script>
</head>
<body>
	<div style="width: 1200px;">
		<div style="width: 100%;height:80px;" align="left">
			<img src="<%=basePath %>/resource/images/logo.png" style="width: 107px;height:80px;">
		</div>
		<div style="width: 100%;height:460px;background-image:url(<%=basePath %>/resource/images/xinshouye/ditu.jpg);background-repeat: no-repeat; ">
			<div>
				<!--<div id="bottom" style="float: left;background-color: #ffffff;margin-left: 100px;">
					<span class="sp1">  
					<span class="sp2"></span> 
					</span>
					<div class="position-pointer"></div>
					<div style="width: 200px;height:100px;border-bottom: 1px solid #c0c0c0;" align="center">
						<img src="<%=basePath %>/resource/images/logo.png" style="width: 107px;height:85px;">
					</div>
					<div style="font-size: 13px;color: #c0c0c0;" align="center">
						<div>
							一公里生活圈
						</div>
						<div>
							生活服务专家
						</div>
						<br />
						<div id="positions">
							<img id="loadingImg" alt="加载中。。。" src="<%=basePath %>/resource/images/pages/loading.gif" style="width: 45px; height: 45px;" />
						</div>
					</div>
				</div> -->
				<div style="float: left;margin-left:400px;height: 470px;">
					 <form id="form1">
					    <div class="outDiv">
					        <div class="CRslide" style="margin-left:40px;margin-top:65px;z-index: 99;top: 27px;">
					            <img style="width:240px;height:300px;" src="<%=basePath %>/resource/images/xinshouye/qumaicai.png" class="current"/>
								<img style="width:240px;height:300px;" src="<%=basePath %>/resource/images/xinshouye/qusanbu.png"/>
								<img style="width:240px;height:300px;" src="<%=basePath %>/resource/images/xinshouye/quwaner.png"/>
								<img style="width:240px;height:300px;" src="<%=basePath %>/resource/images/xinshouye/quyundong.png"/>
					        </div>
					        <div class="num" style="z-index: 0;">
					        	<a href="http://shop106228920.taobao.com/shop/view_shop.htm?spm=686.1000925.0.0.dYGcbr&mytmenu=mdianpu&utkn=g,mj2we5lnmfuwgyljmnqws1378437866361&user_number_id=1792640644&scm=1028.1.1.20001" target="_blank" class="menu_item">
					        		<img id="maicai" class="on" style="width: 110px;height: 90px;" src="<%=basePath %>/resource/images/xinshouye/maicaiyun2.png"/>
					        	</a>
					        	<a href="<%=basePath %>/walk/main" target="_blank" class="menu_item"><img id="sanbu" style="width: 110px;height: 90px;" src="<%=basePath %>/resource/images/xinshouye/sanbuyun.png"/></a>
					        	<a href="<%=basePath %>/play/main" target="_blank" class="menu_item"><img id="quwan" style="width: 110px;height: 90px;" src="<%=basePath %>/resource/images/xinshouye/quwanyun.png"/></a>
					        	<a href="<%=basePath %>/sport/main" target="_blank" class="menu_item"><img id="yundong" style="width: 110px;height: 90px;" src="<%=basePath %>/resource/images/xinshouye/yundongyun.png"/></a>
					        </div>
					    </div>
					    </form>
				</div>
				<div style="float: left;margin-left:15px;margin-top:30px;">
					<div style="width: 230px;height:240px;border-radius: 5px; border: 1px solid #000000;background-color: #ffffff;text-align: left;margin-top: 70px;">
						<div style="width: 230px;height:10px;background-color: #1dc796;">
						
						</div>
						<div style="font-size: 20px;margin: 10px 0 0 20px;">
							步步用户
						</div>
						<div style="font-size: 13px;margin: 10px 0 0 20px;">
							邮箱:
						</div>
						<div style="margin: 5px 0 0 20px;">
							<input type="text" id="userLoginName" style="width: 200px;"/>
						</div>
						<div style="font-size: 13px;margin: 10px 0 0 20px;">
							密码:
						</div>
						<div style="margin: 5px 0 0 20px;">
							<input id="userLoginPassword" type="password" style="width: 200px;"/>
						</div>
						<div style="margin: 10px 0 0 20px;font-size: 13px;">
							<input type="text" style="width: 40px;"/>验证码:
						</div>
						<div style="margin: 10px 0 0 20px;">
							<div style="color: #ffffff;font-size: 13px;float: left;background-color: #1dc796;width: 70px;height:18px;cursor:pointer;" align="center">
								<a href="<%=basePath%>/user/regist" target="_blank">注册</a>
							</div>
							<div id="loginButton" style="color: #ffffff;font-size: 13px;float: left;background-color: #1dc796;width: 70px;height:18px; cursor: pointer;margin-left: 50px;" align="center">
								登录
							</div>
							<div style="clear: both;"></div>
						</div>
					</div>
				</div>	
				<div style="clear: both;"></div>
			</div>
			<div>
			
			</div>
		</div>
		<div>
			<div align="center">
				<img style="height: 200px;" src="<%=basePath %>/resource/images/xinshouye/bottom.png"/>
			</div>
		</div>
	</div>
</body>
</html>
